import {selectDetailData, selectDevConConfig} from '@/api/device'
import {PropType} from 'vue'

type DrawerOption = {
  widht: string | number | null
  title: string
  placement: 'left'
  size: 'default' | 'large' | null
}

const DeviceInfoDrawer = defineComponent({
  name: 'DeviceInfoDrawer',
  props: {
    devGId: {
      type: String as PropType<DevGId>,
      default: null,
      required: true,
    },
    devId: {
      type: Number as PropType<DevId>,
    },
    outerClass: {
      type: String,
      default: '',
    },
    btnClass: {
      type: String,
      default: '',
    },
    drawerOption: {
      type: Object as PropType<DrawerOption>,
      default: {
        width: 'auto',
        size: 'large',
        placement: 'right',
        title: '设备详情',
      },
    },
  },
  setup(props, {slots}) {
    let {drawerOption} = toRefs(props)

    const drawerVisible = ref(false)

    const drawerClose = (e: any) => {
      drawerVisible.value = false
    }

    const dataSource = ref<Device.DevBaseInfo | undefined>(undefined)

    const handle_open_drawer = () => {
      drawerVisible.value = true
      getDataSource()
    }

    function getDataSource() {
      if (props.devId) {
        selectDetailData({devId: props.devId})
          .then(res => {
            dataSource.value = res.data
          })
          .catch(err => {
            dataSource.value = undefined
          })
      }
    }

    return () => (
      <span class={[props.btnClass]} onClick={handle_open_drawer}>
        设备详情
        <a-drawer
          width={drawerOption.value.widht}
          size={drawerOption.value.size}
          title={drawerOption.value.title}
          placement={drawerOption.value.placement}
          visible={drawerVisible.value}
          onClose={drawerClose}
          bodyStyle={{margin: 0, padding: 0}}
        ></a-drawer>
      </span>
    )
  },
})

export default DeviceInfoDrawer
